import React, { useEffect, useState } from 'react'
import { Card, Table, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { getRightsList } from '@/service/rights'
import { useTranslation } from 'react-i18next'

type DataType = {
  id: number
  authName: string
  level: string
  path: string
  pid: number
}
const Rights = () => {
  const [dataList, setDataList] = useState([])
  const { t } = useTranslation()
  const columns: ColumnsType<DataType> = [
    {
      title: t('rights.table.index'),
      align: 'center',
      width: 70,
      render: (text, record, index) => index + 1
    },
    {},
    { title: t('rights.table.auth_name'), dataIndex: 'authName', key: 'authName', align: 'center' },
    { title: t('rights.table.path'), dataIndex: 'path', key: 'path', align: 'center' },
    {
      title: t('rights.table.auth-level.title'),
      key: 'level',
      align: 'center',
      render: record => (
        <>
          {record.level === '0' && <Tag color="purple">{t('rights.table.auth-level.one')}</Tag>}
          {record.level === '1' && <Tag color="green">{t('rights.table.auth-level.two')}</Tag>}
          {record.level === '2' && <Tag color="cyan">{t('rights.table.auth-level.three')}</Tag>}
        </>
      )
    }
  ]

  const handleSearch = () => {
    getRightsList({ type: 'list' }).then((res: any) => {
      setDataList(res.data)
    })
  }
  useEffect(() => {
    handleSearch()
  }, [])
  return (
    <section className="container-wrapper">
      <Card className="card">
        <Table
          style={{ marginTop: '20px' }}
          rowKey="id"
          columns={columns}
          dataSource={dataList}
          pagination={false}
          bordered
          // scroll={{ y: 540 }}
        ></Table>
      </Card>
    </section>
  )
}

export default Rights
